<template>
    <div>
        <div class="left">
            <van-sidebar v-model="activeKey" >
                <div v-for="(item,index) in titles" :key="index" >
                    <van-sidebar-item :title="item" @click="onChange(item)"/>
                </div>
            </van-sidebar>
        </div>
        <div class="par">
            <div class="right">
                <div class="title">
                    <h3>{{title}}</h3>
                </div>
                <div class="title">
                    <h4>账户余额:{{money}}元</h4>
                </div>

                <div id="myChart"></div>
                <div class="bottom">
                    更多功能正在开发...
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import {Sidebar, SidebarItem} from 'vant';
    import jiuZhangHeadlines from '@/api/jiuZhangHeadlines';

    var myChart;
    export default {
        name: "index",
        data() {
            return {
                activeKey: 0,
                title: '',
                coin: '',
                money: '',
                titles: [
                    "九章头条", "中青看点极速版", "腾讯自选股", "更多..."
                ],
            }
        },
        created() {


        },
        mounted() {
            this.getJjiuZhangData();
            this.title = '九章头条今日收入';
            this.charts(this.coin);

        },

        methods: {
            getJjiuZhangData(){
                //获取九章头条数据
                jiuZhangHeadlines.getUserInfo().then(response => {
                    let data = response.data;
                    this.coin = data.integral;
                    this.money = data.money;
                    this.charts(this.coin);
                }).catch(error => {
                    console.log(error);
                });
            },

            charts(values){
                if (myChart != null && myChart != "" && myChart != undefined) {
                    myChart.dispose();//销毁
                };

                myChart = this.$root.echarts.init(
                    document.getElementById("myChart")
                );
                // 绘制图表
                let color = 'rgba(255, 182, 4, 1)';
                let value = values;
                myChart.setOption({
                    title: [{
                        text: '{a|' + value + '}{b|个}',
                        x: '50%',
                        y: '50%',
                        textAlign: 'center',
                        textStyle: {

                            color: '#333',
                            textAlign: 'center',
                            rich: {
                                a: {
                                    fontSize: 30,
                                    fontWeight: '700',
                                },
                                b: {
                                    fontSize: 18,
                                    padding: [0, 0, 0, 10]
                                }
                            }
                        },
                    },
                        {
                            text: '今日已获得',
                            x: '50%',
                            y: '90%',
                            textAlign: 'center',
                            textStyle: {
                                color: '#333',
                                textAlign: 'center',
                                fontWeight: '400',
                            },
                        }],
                    polar: {
                        radius: ['56%', '52%'],
                        center: ['50%', '50%'],
                    },
                    angleAxis: {
                        max: 100,
                        show: false,
                        startAngle: -90,
                    },
                    radiusAxis: {
                        type: 'category',
                        show: true,
                        axisLabel: {
                            show: false,
                        },
                        axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false
                        },
                    },
                    series: [{
                        name: '',
                        type: 'bar',
                        // roundCap: true,
                        barWidth: 70,
                        backgroundStyle: {
                            color: '#2e2856',
                        },
                        data: [value],
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: new this.$root.echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: color
                                }, {
                                    offset: 1,
                                    color: '#fff'
                                }]),
                            }
                        }
                    },
                        {
                            hoverAnimation: false,
                            type: 'pie',
                            z: 1,
                            data: [100],
                            radius: ['52%', '54%'],
                            zlevel: -2,
                            itemStyle: {
                                color: color,
                                borderColor: color,
                                borderWidth: 0,
                            },
                            label: {
                                normal: {
                                    position: 'inside',
                                    show: false,
                                }
                            },
                        },

                    ]
                });

            },

            onChange(index) {
                switch (index) {
                    case '九章头条' :
                        this.title = index + '今日收入';
                        this.charts(this.coin);
                        break;
                    case '中青看点极速版' :
                        this.title = index + '今日收入';
                        this.charts(this.coin);
                        break;
                    case '番茄看看' :
                        this.title = index + '今日收入';
                        this.charts(this.coin);
                        break;
                    case '更多...' :
                        this.title = index + '今日收入';
                        this.charts(this.coin);
                        break;
                }
            },
        },

    }
</script>

<style scoped>

    .van-sidebar {
        margin-bottom: 30px;
    }

    .left {
        float: left;
    }
    .par {
        height: 100%;

    }

    .right {
        width: 80%;
        /*height: 500px;*/
        /*height: 100%;*/
        background-color: #eff1e3;
        float: left;
    }

    .title {
        margin-top: 15%;
    }

    h3 {
        text-align: center;
    }
    h4 {
        text-align: center;
    }

    #myChart {
        width: auto;
        height: 300px;
    }

    .bottom {
        width: auto;
        height: 200px;
        text-align: center;
        padding: 70px;
    }
</style>
